<template>
  <div class="intro">
    <div class="protection-intro">
      <div class="protection-intro-content">
        Meta Defender matches sellers and buyers of risk to build a basic but
        robust insurance protocol in DeFi. You can buy insurance policy here to
        protect your assets, and stake funds here to provide liquity as an
        insurance underwriter to earn premiums and other proceeds.
      </div>
    </div>
  </div>
  <div
    :class="[
      'project-tvl',
      { 'project-one': item.title === 'Protection' },
      { 'project-two': item.title === 'Nft Hodlers' },
      { 'project-three': item.title === 'Protocol Reward' },
    ]"
    v-for="item in dashboardList"
    :key="item.title"
  >
    <div class="project-content">
      <div class="content-title">
        <div>{{ item.title }}</div>
      </div>
    </div>
    <div class="project-content project-content-data">
      <div class="content-sub-title">{{ item.value1tips }}</div>
      <div class="content-amount">${{ item.value1 }}</div>
    </div>
    <div class="project-content project-content-data">
      <div class="content-sub-title">{{ item.values2Tips }}</div>
      <div class="content-amount">${{ item.value2 }}</div>
    </div>
    <div class="project-content project-content-data">
      <div class="content-sub-title">{{ item.values3Tips }}</div>
      <div class="content-amount">{{ item.value3 }}</div>
    </div>
  </div>
</template>

<script>
import store from "../vuex/store";

export default {
  name: "DashboardIns",
  data() {
    return {
      dashboardList: [
        {
          title: "Protection",
          value1tips: "Total Capacity",
          value1: store.state.web3Utils.totalValidCertificateLiquidity,
          values2Tips: "Total Coverage",
          value2: store.state.web3Utils.totalCoverage,
          values3Tips: "Active Pool",
          value3: "27",
        },
        {
          title: "Nft Hodlers",
          value1tips: "Policy",
          value1: "6529",
          values2Tips: "Liquidity Certicicate",
          value2: "988",
          values3Tips: "Liquidity Medal",
          value3: "727",
        },
        {
          title: "Protocol Reward",
          value1tips: "Premium",
          value1: "10200",
          values2Tips: "Mining Reward",
          value2: "79435",
          values3Tips: "Risk Reserve",
          value3: "21056",
        },
      ],
    };
  },
  computed: {
    totalValidCertificateLiquidity() {
      return store.state.web3Utils.totalValidCertificateLiquidity;
    },
    totalCoverage() {
      return store.state.web3Utils.totalCoverage;
    },
  },
  watch: {
    totalValidCertificateLiquidity(newValue) {
      console.log("newValue", newValue);
      this.dashboardList[0].value1 = newValue;
    },
    totalCoverage(newValue) {
      this.dashboardList[0].value2 = newValue;
    },
  },
};
</script>

<style lang='less'>
.project-tvl {
  width: 90%;
  margin: 0 auto;
  height: 400px;
  margin-top: 20px;
  border-radius: 20px;
  justify-content: space-around;
  align-items: center;
  transition: all linear 0.3s;
}
.project-one {
  background-image: linear-gradient(to right, #2d21b2, rgb(0, 170, 255));
}
.project-two {
  background-image: linear-gradient(to right, #2d21b2, rgb(32, 207, 227));
}
.project-three {
  background-image: linear-gradient(to right, #2d21b2, rgb(32, 227, 182));
}

.project-content {
  display: flex;
  height: 100px;
  flex: auto;
  justify-content: center;
  align-items: center;
}

.content-title {
  height: 40%;
  flex: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eff1f6;
  font-weight: 900;
  font-size: 30px;
}

.content-sub-title {
  color: #eff1f6;
  font-weight: 500;
}

.project-content-data {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.content-amount {
  font-size: 40px;
  color: #eff1f6;
  font-weight: 600;
}

@media (min-width: 916px) {
  .intro {
    margin-bottom: 20px;
  }

  .footer {
    display: none;
  }

  .project-tvl {
    display: flex;
    height: 188px;
    margin-top: 20px;
    justify-content: space-around;
    align-items: center;
    transition: all linear 0.3s;
  }

  .project-content {
    display: flex;
    height: 100%;
    flex: auto;
    justify-content: center;
    align-items: center;
  }

  .content-title {
    border-right: #eff1f6 1px solid;
    height: 40%;
    flex: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #eff1f6;
    font-size: 30px;
  }

  .project-content-data {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .content-amount {
    font-size: 40px;
  }

  .project-tvl:hover {
    width: 92%;
    height: 200px;
    transition: all linear 0.3s;
  }
}

@media (min-width: 690px) and (max-width: 916px) {
  .intro {
    margin-bottom: 20px;
  }

  .footer {
    display: none;
  }

  .project-tvl {
    display: flex;
    height: 130px;
    margin-top: 20px;
    justify-content: space-around;
    align-items: center;
    transition: all linear 0.3s;
  }

  .project-content {
    display: flex;
    height: 100%;
    flex: auto;
    justify-content: center;
    align-items: center;
  }

  .content-title {
    border-right: #eff1f6 1px solid;
    height: 40%;
    flex: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #eff1f6;
    font-size: 24px;
  }

  .project-content-data {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .content-amount {
    font-size: 32px;
  }

  .project-tvl:hover {
    width: 92%;
    height: 176px;
    transition: all linear 0.3s;
  }

  .footer {
    display: block;
  }
}
</style>